<template>
  <s-layout class="widthdraw-log-wrap" title="提现记录">
    <!-- 加载状态 -->
    <view v-if="state.loading && state.pagination.data.length === 0" class="loading-box">
      <text>加载中...</text>
    </view>
    <!-- 记录卡片 -->
    <view class="wallet-log-box ss-p-b-30" v-else>
      <view class="log-list" v-for="(item, index) in state.pagination.data" :key="item.id">
        <view class="head ss-flex ss-col-center ss-row-between">
          <view class="title">{{
            item.withdraw_type === 'bank'
              ? '提现至银行卡'
              : item.withdraw_type === 'alipay'
                ? '提现至支付宝'
                : '提现至微信'
          }}</view>
          <view
            class="num"
            :class="{
              'warning-color': item.status === 1,
              'success-color': item.status === 2,
              'danger-color': item.status < 0,
            }"
          >
            {{ item.amount }}元
          </view>
        </view>
        <view class="status-box item ss-flex ss-col-center ss-row-between">
          <view class="item-title">申请状态</view>
          <view
            class="status-text"
            :class="{
              'warning-color': item.status === 1,
              'danger-color': item.status < 0,
              'success-color': item.status === 2,
            }"
          >
            {{ item.status_text }}
          </view>
        </view>
        <view class="time-box item ss-flex ss-col-center ss-row-between">
          <text class="item-title">账户信息</text>
          <view class="time ss-ellipsis-1" v-if="item.withdraw_type === 'bank' && item.withdraw_info_hidden"
            >{{ item.withdraw_info_hidden.开户行 || '' }}[{{ item.withdraw_info_hidden.银行卡号 || '' }}]</view
          >
          <view class="time ss-ellipsis-1" v-if="item.withdraw_type === 'alipay' && item.withdraw_info_hidden">
            支付宝[{{ item.withdraw_info_hidden.支付宝账户 || '' }}]
          </view>
          <view class="time ss-ellipsis-1" v-if="item.withdraw_type === 'wechat'">微信零钱</view>
          <view class="time ss-ellipsis-1" v-if="!item.withdraw_info_hidden">账户信息未显示</view>
        </view>
        <view class="time-box item ss-flex ss-col-center ss-row-between">
          <text class="item-title">提现单号</text>
          <view class="time"> {{ item.withdraw_sn || '暂无' }} </view>
        </view>
        <view class="time-box item ss-flex ss-col-center ss-row-between">
          <text class="item-title">手续费</text>
          <view class="time">{{ item.charge_fee || 0 }}元</view>
        </view>
        <view class="time-box item ss-flex ss-col-center ss-row-between">
          <text class="item-title">申请时间</text>
          <view class="time"> {{ item.createtime || item.updatetime || '暂无' }}</view>
        </view>

        <view
          v-if="
            item.withdraw_type === 'wechat' &&
            item.status === 1 &&
            item.wechat_transfer_state === 'WAIT_USER_CONFIRM'
          "
          class="opt-box ss-flex ss-row-right"
        >
          <button class="ss-reset-button cancel-button" @tap="onCancel(item, index)"
            >取消操作</button
          >
          <button
            class="ss-reset-button confirm-button ui-BG-Main-Gradient"
            @tap="onRetry(item, index)"
          >
            继续提现
          </button>
        </view>
      </view>
    </view>
    <s-empty
      v-if="state.pagination.total === 0 && !state.loading"
      icon="/static/comment-empty.png"
      text="暂无提现记录"
    ></s-empty>
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
  </s-layout>
</template>

<script setup>
  import { reactive } from 'vue';
  import sheep from '@/sheep';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import _ from 'lodash';
  const state = reactive({
    currentTab: 0,
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    loadStatus: '',
    loading: false,
  });
  async function getList(page = 1, list_rows = 6) {
    if (state.loading) return;
    state.loading = true;
    
    // 如果是第一页，重置数据
    if (page === 1) {
      state.pagination.data = [];
    }
    
    try {
      const res = await sheep.$api.pay.withdraw.list({ list_rows, page });
      console.log('提现记录API响应:', res);
      if (res.code === 1) {
        // 兼容不同的数据结构
        const dataList = res.data.data || res.data.list || [];
        let logList = page === 1 ? dataList : _.concat(state.pagination.data, dataList);
        state.pagination = {
          ...res.data,
          data: logList,
        };
        if (state.pagination.current_page < state.pagination.last_page) {
          state.loadStatus = 'more';
        } else {
          state.loadStatus = 'noMore';
        }
      } else {
        console.error('提现记录API错误:', res.msg);
        sheep.$helper.toast(res.msg || '获取提现记录失败');
      }
    } catch (error) {
      console.error('提现记录请求异常:', error);
      sheep.$helper.toast('网络错误，请稍后重试');
    } finally {
      state.loading = false;
    }
  }
  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      getList(state.pagination.current_page + 1);
    }
  }

  // 取消提现
  const onCancel = async (withdraw, index) => {
    if (sheep.$platform.name !== withdraw.platform) {
      sheep.$helper.toast('请在发起该次提现的平台操作');
      return;
    }

    let payload = {
      withdraw_sn: withdraw.withdraw_sn,
      type: withdraw.withdraw_type,
    };

    let { code, msg, data } = await sheep.$api.pay.withdraw.cancel(payload);
    if (code === -1) {
      sheep.$platform.useProvider('wechat').bind();
    }
    if (code === 1) {
      sheep.$helper.toast('提现已撤销, 请等待处理结果');
      // 刷新列表
      state.pagination.data[index] = data;
    } else {
      sheep.$helper.toast(msg);
    }
  };

  // 继续提现
  const onRetry = async (withdraw, index) => {
    if (sheep.$platform.name !== withdraw.platform) {
      sheep.$helper.toast('请在发起该次提现的平台操作');
      return;
    }
    let payload = {
      withdraw_sn: withdraw.withdraw_sn,
      type: withdraw.withdraw_type,
    };

    const { data } = await sheep.$api.pay.withdraw.retry(payload);

    if (payload.type === 'wechat') {
      sheep.$platform.useProvider('wechat').transfer(data.transfer_data);
    }
  };

  onLoad(() => {
    console.log('提现记录页面加载');
    getList();
  });
  onReachBottom(() => {
    loadmore();
  });
</script>

<style lang="scss" scoped>
  // 加载状态
  .loading-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    color: #999;
    font-size: 28rpx;
  }
  
  // 记录卡片
  .log-list {
    min-height: 213rpx;
    background: $white;
    margin-bottom: 10rpx;
    padding-bottom: 10rpx;

    .head {
      padding: 0 35rpx;
      height: 80rpx;
      border-bottom: 1rpx solid $gray-e;
      margin-bottom: 20rpx;

      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: $dark-3;
      }

      .num {
        font-size: 28rpx;
        font-weight: 500;
      }
    }

    .item {
      padding: 0 30rpx 10rpx;

      .item-icon {
        color: $gray-d;
        font-size: 36rpx;
        margin-right: 8rpx;
      }

      .item-title {
        width: 180rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #666666;
      }

      .status-text {
        font-size: 24rpx;
        font-weight: 500;
      }

      .time {
        font-size: 24rpx;
        font-weight: 400;
        color: #c0c0c0;
      }
    }
  }
  .warning-color {
    color: #faad14;
  }
  .danger-color {
    color: #ff4d4f;
  }
  .success-color {
    color: #67c23a;
  }

  .opt-box {
    margin-top: 10rpx;
    padding-top: 20rpx;
    padding-bottom: 10rpx;
    padding-right: 30rpx;
    border-top: 1rpx solid $gray-e;

    .cancel-button {
      width: 160rpx;
      height: 60rpx;
      font-size: 26rpx;
      border-radius: 30rpx;
      margin-right: 10rpx;
      background: $gray-e;
    }
    .confirm-button {
      width: 160rpx;
      height: 60rpx;
      font-size: 26rpx;
      border-radius: 30rpx;
    }
  }
</style>
